<template>
  <div class="home-view">
    <div class="home-content graybg">
      <div class="home-box">
          <div class="home-title">
              <p class="user-name">{{userName}}</p>
              <div class="hello-world">欢迎使用云客服系统</div>
          </div>
      </div>
    </div>
    <div class="home-content" style="width: calc(100% - 816px); margin-left: 16px">
      <notice-card></notice-card>
    </div>
    <div class="home-content" style="width: 800px">
      <data-table></data-table>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { prefetchApps } from 'qiankun'
import { CommonModule } from '@/store/modules/common'
import NoticeCard from './components/NoticeCard.vue'
import DataTable from './components/DataTable.vue'
@Component({
  name: 'workbrench',
  components: {
    NoticeCard,
    DataTable
  }
})
export default class Workbrench extends Vue {
  private $store: any
  get userName () {
    const user = this.$store.state.common.session.user
    return user ? `${user.agentName}【${user.agentNumber}】` : '--'
  }

  private mounted () {
    // const now = new Date()
    // const today = '' + now.getFullYear() + now.getMonth() + now.getDate()
    // 预加载子应用的文件
    if (this.$store.state.common.session.account.mpShifted) { // 若使用新客户，不能预加载微应用
      return false
    }
    prefetchApps([
      { // 客户工作台
        name: 'apass-micro-customerWorkbench',
        entry: `${(CommonModule.initConfig as any).platformConfig.mopowerUrl}/sheetSummary.html`
      },
      { // 工单工作台
        name: 'apass-micro-ticketWorkbench',
        entry: `${(CommonModule.initConfig as any).platformConfig.mopowerUrl}/sheetSummary.html`
      },
      { // 通话弹屏
        name: 'apass-micro-customerData',
        entry: `${(CommonModule.initConfig as any).platformConfig.mopowerUrl}/sheetRecord.html`
      },
      { // 模板配置
        name: 'apass-micro-templateConfig',
        entry: `${(CommonModule.initConfig as any).platformConfig.mopowerUrl}/templateConfig.html`
      },
      { // 角色权限配置
        name: 'apass-micro-settingUserPermissions',
        entry: `${(CommonModule.initConfig as any).platformConfig.mopowerUrl}/roleList.html`
      }
    ])
    console.log('加载所有qiankun子应用')
  }
}
</script>

<style lang="stylus" scoped>
.home-view
  .graybg
      background linear-gradient(270deg, rgba(238, 246, 255, 0.79) 37%, rgba(238, 246, 255, 0.61) 69%)
  .home-content
    float: left
    margin-bottom: 16px
    .home-box
      width 800px
      height 266px
      box-shadow 0px 0px 4px 0px #E0E6F0, 0px 1px 4px 0px #E0E6F0
      border-radius 10px
      background url('../../assets/img/home-bg.png') no-repeat right center
      background-size: contain
      .home-title
        padding 70px 0 0 50px
        font-weight bold
        .user-name
          font-size 20px
          color $fc-gray
          line-height 2
        .hello-world
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #767E91;
          margin-top: 10px
        .encourage
          color $fc-gray3
</style>
